let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
/**
 * 把css单独抽成一个文件
 * 但是css便不会压缩
 */
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
/**
 * 压缩css代码用
 * 但是单独使用这个，其他文件就不压缩了
 */
let optimizeCss = require('optimize-css-assets-webpack-plugin');
let uglifyjs = require('uglifyjs-webpack-plugin');

module.exports =  {
    mode: 'production',
    // 优化
    optimization: {
        minimizer: [
            new uglifyjs({
                cache: true,
                // 并行压缩
                parallel: true,
                // 调试时，能找到源代码位置
                sourceMap: true
            }),
            new optimizeCss()
        ]
    },
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve('dist')
    },
    devServer: {
        contentBase: 'dist'
    },
    module: {
        rules: [
            {test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true        
            }
        }),
        new MiniCssExtractPlugin({
            filename: 'public.css'
        })
    ]
}